<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
  <script src="/js/inc.js"></script>
  <script src="/js/axios.min.js"></script>
  <script src="/js/vue.min.js"></script>
  <script src="/js/element-ui.index.js"></script>
  <link rel="stylesheet" href="/css/element-ui.index.css">
  <link rel="stylesheet" href="/css/style.css">

</head>

<body>
  <div id="app">

    {{ msg }}
    <div>
      <el-label>username</el-label>
      <el-input type="text" class="input" v-model="username" placeholder="username"></el-input>
    </div>

    <div>
      <el-label>password</el-label>
      <el-input type="text" class="input" v-model="password" placeholder="password"></el-input>
    </div>

    <div>
      <el-label>验证码</el-label>
      <el-input class="input" v-model="captcha" placeholder="captcha"></el-input>
      <img @click="getCaptcha" :src="img.content" alt="">
    </div>
    <div>

    </div>

    <br>
    <div>
      <el-button @click="handleClick" type="primary">登录</el-button>
    </div>

    <!-- <div>
      <el-button @click="getCaptcha" type="primary">获取验证码</el-button>
    </div>
    <div>
      <el-label>url</el-label>
      <el-input class="input" v-model="url" placeholder="url"></el-input>
    </div> -->

  </div>
</body>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      msg: "hello world",
      username: "staff001",
      password: "pwd001",
      captcha: "",
      url: "http://lu.com",
      img: {
        content: "",
        hash: "",
      },
      token: ""
    },
    methods: {
      handleClick() {
        axios.post(this.url + "/admin/login", {
          username: this.username,
          password: this.password,
          captcha: {
            hash: this.img.hash,
            content: this.captcha,
          },
        }).then(resp => {
          this.token = resp.data.token
          console.log(this.token)
          this.$alert(this.token, 'token', {
            confirmButtonText: '确定'
          })

        })
      },
      getCaptcha() {
        axios.get(this.url + "/captcha").then(resp => {
          this.img.content = resp.data.content
          this.img.hash = resp.data.hash
        })
      }
    },
    mounted() {
      this.getCaptcha();
    }
  })
  // var add = function (a, b) {
  //   return a + b;
  // }

  // var multi = (a, b) => { return a * b }

  // console.log(add(1, 2))
  // console.log(multi(2, 3))
  // console.log(undefined == true)
</script>

</html>